
// 写一个ajax

// 拿到列表页的id根据id去后端读数据、
const id = location.search.split("=")[1];
let goods = {};
// 立即开启请求，根据id获取指定商品的详情信息
ajax("http://localhost:3000/api", {
    type: "getDetail",
    id: id
}).then(res => {
    // then的第一个回调函数表示成功
    res = JSON.parse(res);
    if (res.code === 1) {
        // console.log(res.data);
        // 准备渲染
        goods = res.data
        render(res.data);
    } else if (res.code === 0) {
        alert("商品卖完了");
        location.href = "../index.html"
    }
})

// 获取要填充数据的元素
const sImg = document.querySelector(".sBox img"); //小盒子
const bImg = document.querySelector(".bBox img"); //大盒子
const imgBox = document.querySelector(".floBox"); //选项卡大图
const proName = document.querySelector(".title1"); //商品名称
const newPrice = document.querySelector(".newPrice"); //现价
const oldPrice = document.querySelector(".oldPrice"); //原价
const detail = document.querySelector(".p2 .detail"); //原价

// const mask = document.querySelector(".mask");  // 遮罩
// const left = document.getElementById(".btnLeft"); // 左按钮
// const right = document.getElementById(".btnRight") // 右按钮
console.log(detail);

// 根据数据，渲染页面结构
function render(data) {
    sImg.src = data.img;
    bImg.src = data.img;
    proName.innerHTML = data.proName;
    detail.innerHTML = data.detail;
    oldPrice.innerHTML = data.oldPrice;
    newPrice.innerHTML = data.price;
    // .innerHTML = data.price;

    let str = "";
    for (let i = 0; i < data.imgs.length; i++) {
        str += `<li><img src="${data.imgs[i]}"></li>`
    }
    imgBox.innerHTML = str;
    new Small_Big();
    new ChangeImg();
    // 渲染完成之后，再执行放大镜效果
}


function ajax(url, data) {
    let str = "";
    for (let i in data) {
        str += `${i}=${data[i]}&`
    }
    url += "?" + str;

    const xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.send();

    return new Promise((resolve, reject) => {
        xhr.onload = function () {
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(xhr.status);
            }
        }
    })
}
// 执行放大镜效果
class Small_Big {
    constructor() {
        // 1. 选择元素
        this.box = document.querySelector(".box");
        this.sBox = document.querySelector(".sBox");
        this.sSpan = document.querySelector(".sBox span");
        this.sImg = document.querySelector(".sBox img");
        this.bBox = document.querySelector(".bBox");
        this.bImg = document.querySelector(".bBox img");
        this.btnLeft = document.querySelector(".btnLeft");
        this.btnRight = document.querySelector(".btnRight");

        // 2. 执行绑定事件
        this.addEvent()
    }
    addEvent() {
        const that = this;
        // 实现绑定事件
        // 进入
        this.sBox.onmouseover = function () {
            // 3. 执行显示
            that.show();
        }
        // 离开
        this.sBox.onmouseout = function () {
            // 4. 执行隐藏
            that.hide();
        }
        // 移动
        this.sBox.onmousemove = function (eve) {
            const e = eve ? eve : window.event;
            // 5. 执行移动功能
            that.move(e);
        }
    }
    show() {
        // 实现显示
        this.sSpan.style.display = "block";
        this.bBox.style.display = "block";

        // 补全布局：设置遮罩层span的尺寸
        // 遮罩层span的尺寸 = 大图容器 / 大图 * 小图容器
        this.sSpan.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.sSpan.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";

        // 提前获取span能移动的最大范围，方便将来重复使用
        this.maxLeft = this.sBox.offsetWidth - this.sSpan.offsetWidth;
        this.maxTop = this.sBox.offsetHeight - this.sSpan.offsetHeight;
    }
    hide() {
        // 实现隐藏
        this.sSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    move(e) {
        // 实现有边界限定的拖拽
        let l = e.pageX - this.sSpan.offsetWidth / 2 - this.box.offsetLeft;
        let t = e.pageY - this.sSpan.offsetHeight / 2 - this.box.offsetTop;
        // 边界限定
        if (l < 0) l = 0;
        if (t < 0) t = 0;
        if (l > this.maxLeft) {
            l = this.maxLeft
        }
        if (t > this.maxTop) {
            t = this.maxTop
        }
        // 设置span的位置
        this.sSpan.style.left = l + "px";
        this.sSpan.style.top = t + "px";
        // 根据拖拽的位置计算比例
        const x = l / this.maxLeft;
        const y = t / this.maxTop;
        // 根据比例计算右侧大图需要移动的位置
        this.bImg.style.left = -x * (this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y * (this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
}
new Small_Big();



class ChangeImg {
    constructor() {
        this.li = document.querySelectorAll("li");
        this.sImg = document.querySelector(".sBox img");
        this.bImg = document.querySelector(".bBox img");
        // 准备图片数据：中图和大图
        this.mImgs = ["https://ssl2.sephorastatic.cn/products/V/S/1/0/2/4/5/6/4/1_n_12120_350x350.jpg", "https://ssl3.sephorastatic.cn/products/5/5/1/2/3/4/1_n_12109_350x350.jpg"]
        this.bImgs = ["https://ssl2.sephorastatic.cn/products/V/S/1/0/2/4/5/6/4/1_n_12120_350x350.jpg", "https://ssl3.sephorastatic.cn/products/5/5/1/2/3/4/1_n_12109_350x350.jpg"];
        // 上一个图片的索引
        this.prev = 0;
        this.addEvent();
    }
    addEvent() {
        const that = this;
        for (let i = 0; i < this.li.length; i++) {
            // 给每个li绑定索引
            this.li[i].index = i;
            // 绑定事件
            this.li[i].onclick = function () {
                // 清除上一个索引对应li的样式
                that.li[that.prev].className = "";
                // 给当前li添加样式
                this.className = "active";
                // 修改中图和大图的图片地址，为当前点击li的索引对应的数据
                that.sImg.src = that.mImgs[this.index];
                that.bImg.src = that.bImgs[this.index];
                // 将当前点击li的索引，设置给上一个索引，以备下次点击使用
                that.prev = this.index;
            }
        }
    }
}
new ChangeImg();


// 给购物车页面的地址栏加id
const aaa = document.querySelector(".aaa")
let src = "./2.shopping-cart.html"
aaa.onclick = function () {
    if(localStorage.getItem("isLogin") !== "ok"){
        alert('你还没有登录')
        return false;
    }
    // setCookie(id, 1)
    // 假设数据形式：[{id:"",num:1},{id:"",num:1},...]
    // 先读取本地存储中的数据
    // 读到了就解析下，没读到就给一个空数组
    let saveGoods = getCookie("goods") ? JSON.parse(getCookie("goods")) : [];
    // 1.判断是否是第一次加入购物车
    if (saveGoods.length < 1) {
        // 2.是第一次
        saveGoods.push({
            id: goods.proId,
            num: 1,
            price : goods.price,
            flag: 0  //0表示选中框未选中，1，表示选中
        })
    } else {
        // 2.不是第一次加入购物车，判断本次商品是否是新商品？
        //  跟原来的商品作比较,看看点一次的那个有没有重复的，some只要有一个相同
        let i = 0;
        const flag = saveGoods.some((val, idx) => {
            // 不断地把idx保留到i身上 
            i = idx;
            // 看遍历出来的id是不是等于当前的id
            return val.id === goods.proId;
        })
        // flag为true，找到了一样的
        if (flag) {
            // 3.不是xin，修改老数据的数量,再存回去
            saveGoods[i].num++
        } else {
            // 3.是新商品，在原来的的基础上增加数据
            saveGoods.push({
                id: goods.proId,
                num: 1,
                price : goods.price,
                flag: 0  //0表示选中框未选中，1，表示选中
            })
        }
    }
    setCookie("goods", JSON.stringify(saveGoods));
    location.assign(src);
}

// 给详情页加购物车的按钮加登陆守卫
const goCart = document.querySelector(".goCart"); //去购物车按钮
goCart.onclick = function(){
   
}